<template>
	<view>
		<view class="bg-fff padding-30">
			<view style="height: 64rpx;"></view>
			<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		    <u-tabs :list="list1"></u-tabs>
		</view>
		
		<view class="padding-20">
			<view class="bg-fff padding-20 border-radius20 margin-bottom20">
				<view class="flex-between margin-bottom20">
					<view class="fontSize-13">
						<text style="color: #2F85E4;">农药喷洒</text>
						<text class="color-808080 margin-left20">编号123</text>
					</view>
					<view class="fontSize-13 color-808080">2025-01-02</view>
				</view>
				<!-- 进度条 -->
				<view class="flex-alignItems-center jindu-view margin-bottom20">
					<view class="flex-center flex1">
						<view class="fontSize-15" style="color: #00BAAD;">待接单</view>
						<u-icon name="arrow-right" color="#00BAAD" size="16"></u-icon>
					</view>
					<view class="flex-center flex1">
						<view class="fontSize-15" style="color: #00BAAD;">待作业</view>
						<u-icon name="arrow-right" color="#00BAAD" size="16"></u-icon>
					</view>
					<view class="flex-center flex1">
						<view class="fontSize-15" style="color: #00BAAD;">作业中</view>
						<u-icon name="arrow-right" color="#00BAAD" size="16"></u-icon>
					</view>
					<view class="flex-center flex1">
						<view class="fontSize-15" style="color: #00BAAD;">已完成</view>
						<u-icon name="arrow-right" color="#00BAAD" size="16"></u-icon>
					</view>
				</view>
				<!-- 语音发布 -->
				<view class="" v-if="true">
					<view class="flex-alignItems-center">
						<image class="img-100 border-radius50 margin-right20" src='../../static/logo.png' mode="">
						</image>
						<view class="" style="width: 100%;">
							<view class="flex-between flex1 margin-bottom20">
								<view class="flex-alignItems-center">
									<view class="fontSize-15 color-000">刘磊 </view>
								</view>
								<view class="flex-alignItems-center margin-bottom20">
									<view class="fontSize-15 color-000">10km</view>
									<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
								</view>
							</view>
							<view class="flex-between margin-bottom20">
								<view class="flex-alignItems-center">
									<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
									<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
								</view>
								<view class="fontSize-15">
									<text class="color-000">已付定金</text>
									<text style="color: #FF5733;">10元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="fontSize-15 color-000 margin-bottom20">录音</view>
					<view class="flex-between">
						<view class="flex-alignItems-center">
							<image class="img-32 margin-right10" src="../../static/images/06.png" mode=""></image>
							<view class="fontSize-15" style="color: #2A82E4;">作业报告</view>
						</view>
						<view class="flex-alignItems-center" @click="textShow = true">
							<view class="confirm-btn flex-center">接单</view>
						</view>
					</view>
				</view>
				
				<!-- 文字发布 -->
				<view class="" v-if="false">
					<view class="flex-alignItems-center">
						<image class="img-100 border-radius50 margin-right20" src="../../static/logo.png" mode="">
						</image>
						<view class="" style="width: 100%;">
							<view class="flex-between flex1 margin-bottom20">
								<view class="flex-alignItems-center">
									<view class="fontSize-15 color-000">刘磊 </view>
								</view>
								<view class="flex-alignItems-center margin-bottom20">
									<view class="fontSize-15 color-000">10km</view>
									<u-icon name="map-fill" color="#2A82E4" size="16"></u-icon>
								</view>
							</view>
							<view class="flex-between margin-bottom20">
								<view class="flex-alignItems-center">
									<u-icon name="phone-fill" color="#2A82E4" size="16"></u-icon>
									<view class="fontSize-15" style="color: #2A82E4;">18000000000</view>
								</view>
								<view class="fontSize-15">
									<text class="color-000">已付定金</text>
									<text style="color: #FF5733;">10元</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-alignItems-center margin-bottom20">
						<view class="fontSize-15 color-000 margin-right20">作业面积：300亩</view>
						<view class="fontSize-15 color-000">农作物：玉米</view>
					</view>
					<view class="fontSize-15 color-000 margin-bottom20">地址:1232131</view>
					<view class="flex-between">
						<view class="flex-alignItems-center">
							<image class="img-32 margin-right10" src="../../static/images/06.png" mode=""></image>
							<view class="fontSize-15" style="color: #2A82E4;">查看报告</view>
						</view>
						<view class="flex-alignItems-center">
							<view class="confirm-btn flex-center">接单</view>
						</view>
					</view>
				</view>
		
				
			    
			</view>
		</view>
		
		<view style="height: 200rpx;"></view>
		
		<view class="padding-20" v-if="false">
			<view class="flex-justAliCenter-column margin-top150">
				<image class="img-120 margin-bottom30" src="../../static/images/null.png" mode=""></image>
				<view class="fontSize-13 color-999 margin-bottom30">暂无数据</view>
				<view class="list-btn">发布需求</view>
			</view>
		</view>
		   
		<!-- 发布选项 -->
		<u-popup :show="releaseShow" @close="releaseShow = false" round="20" mode="center">
			<view class="repopup-view">
				<view class="fontSize-18 color-000 text-center fontWeight-bold">发布类型</view>
				<view class="flex-justAliCenter-column margin-top50">
					<view class="flex-center popup-item">
						<image class="img-32 margin-right20" src="../../static/images/04.png" mode=""></image>
						<view class="fontSize-15 color-fff">农药喷洒</view>
					</view>
					<view class="flex-center popup-item1">
						<image class="img-32 margin-right20" src="../../static/images/05.png" mode=""></image>
						<view class="fontSize-15 color-fff">化肥播撒</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 取消原因 -->
		<u-popup :show="concleShow" @close="concleShow = false" round="20" mode="center">
			<view class="repopup-view">
				<view class="fontSize-18 color-000 text-center fontWeight-bold margin-bottom30">取消原因</view>
				<view class="flex-alignItems-center">
					<view class="margin-right20">
						<image class="img-32" src="../../static/images/checked.png" mode=""></image>
						<image class="img-32" src="../../static/images/check.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-000">重新下单</view>
				</view>
				<view class="flex-alignItems-center margin-30-0">
					<view class="margin-right20">
						<image class="img-32" src="../../static/images/checked.png" mode=""></image>
						<image class="img-32" src="../../static/images/check.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-000">不做了另有打算</view>
				</view>
				<view class="flex-alignItems-center margin-bottom50">
					<view class="margin-right20">
						<image class="img-32" src="../../static/images/checked.png" mode=""></image>
						<image class="img-32" src="../../static/images/check.png" mode=""></image>
					</view>
					<view class="fontSize-15 color-000">其他原因</view>
				</view>
				
				<view class="flex-center margin-bottom30">
					<view class="concle-popup-btn" @click="concleShow = false">取消</view>
					<view class="concle-popup-btn1">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待接单',
				}, {
					name: '待作业'
				}, {
					name: '作业中'
				}, {
					name: '已完成'
				}],
				releaseShow: false, // 发布选择
				concleShow: false, // 取消原因
				count: 4,
				value: 2,
				keyword:''
			}
		},
		onShow() {
			uni.$on('releasePopup', () => {
				this.releaseShow = true
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.kefu-view{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #2A82E4;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		padding: 10rpx;
	}
	.settlement-btn{
		padding: 10rpx 20rpx;
		background-color: #FF5733;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 12px;
	}
	.settlement-view{
		padding: 20rpx;
		background-color: #FFF9E6;
		border-radius: 10rpx;
	}
	.concle-popup-btn1{
		padding: 10rpx 40rpx;
		background-color: #2A82E4;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
	}
	.concle-popup-btn{
		padding: 10rpx 40rpx;
		background-color: #A6A6A6;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 14px;
		margin-right: 20rpx;
	}
	.confirm-btn {
		padding: 5rpx 30rpx;
		border: 1px solid #A6A6A6;
		border-radius: 30rpx;
		color: #A6A6A6;
		font-size: 14px;
		margin-left: 20rpx;
	}
	
	.cancel-btn {
		padding: 5rpx 30rpx;
		border: 1px solid #A6A6A6;
		border-radius: 30rpx;
		color: #A6A6A6;
		font-size: 14px;
	}
	
	.jindu-view {
		padding: 20rpx;
		border-radius: 10rpx;
		border: 1rpx dashed #00BAAD;
		background-color: #F2FFFE;
	}
	
	.popup-item1 {
		width: 400rpx;
		height: 100rpx;
		background-color: #00BAAD;
		border-radius: 10px;
		margin: 50rpx 0;
	}
	
	.popup-item {
		width: 400rpx;
		height: 100rpx;
		background-color: #2A82E4;
		border-radius: 10px;
	}
	
	.repopup-view {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 500rpx;
		// height: 500rpx;
	}
	
	.list-btn {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #FF8D1A;
		border-radius: 30rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

</style>